<template>
	<view class="com">
		<commonHeader :title="$t('oio1')" headtitle toback='0'></commonHeader>
		<view class="gHeadbox"></view>
		<view class="comBom">
			<view class="comBom_top" @click="toteamsall">
				<view class="comBom_top_t">
					<image src="@/static/img/sqq.png" mode=""></image>
					<!-- <text>{{$t('oio2')}}</text> -->
					<text v-if="teamInfo.teamLevel==0">{{$t('ll8')}}</text>
					<text v-else-if="teamInfo.teamLevel==1">{{$t('aa46')}}会员</text>
					<text v-else-if="teamInfo.teamLevel==2">{{$t('aa47')}}会员</text>
					<text v-else-if="teamInfo.teamLevel==3">{{$t('aa48')}}会员</text>
					<text v-else-if="teamInfo.teamLevel==4">{{$t('aa49')}}会员</text>
					<text v-else-if="teamInfo.teamLevel==5">{{$t('aa50')}}会员</text>
					<text v-else-if="teamInfo.teamLevel==6">{{$t('aa51')}}会员</text>
					<text v-else-if="teamInfo.teamLevel==7">{{$t('aa52')}}会员</text>
					<text v-else></text>
				</view>
				<view class="comBom_top_r hidden-text" @click.stop="fndynamicLeft('setplace')">
					{{!teamInfo.nodeLeve||teamInfo.nodeLevel<=0?$t('oio16'):teamInfo.nodeLevel}}
				</view>
				<view class="comBom_top_b d_f_around">
					<view class="comBom_top_b_l hidden-text">
						<!-- {{$t('oio3')}} -->
						<text v-if="teamInfo.businessLevel==0">{{$t('oio3')}}</text>
						<text v-else-if="teamInfo.businessLevel==1">{{$t('oio17')}}</text>
						<text v-else-if="teamInfo.businessLevel==2">{{$t('oio18')}}</text>
						<text v-else-if="teamInfo.businessLevel==3">{{$t('oio19')}}</text>
						<text v-else>{{$t('oio3')}}</text>
						<!-- 创始权益  股东权益  节点权益 -->
					</view>
					<view class="comBom_top_b_c">

					</view>
					<view class="comBom_top_b_r" @click.stop="torecord">
						<view class="sy hidden-text">
							{{$t('oio4')}}
						</view>
						<view class="num">
							<!-- {{teamInfo.dynamicTotal?Number(retainFourDecimals(teamInfo.dynamicTotal)):'0'}} -->
							{{teamInfo.businessProfit?Number(teamInfo.businessProfit):'0'}}

						</view>
					</view>
				</view>
			</view>
			<view class="comBom_com">
				<view class="comboxs" v-for="(item,index) in teamInfo.areaDtoList">
					<view class="flexItem" @click="toteams(item.address)">
						<view class="flexItem_t">
							<image src="@/static/img/sqqs.png" class="flexItem_t_img" mode=""></image>
							<text v-if="item.area==1" class="hidden-text">{{$t('oio5')}}</text>
							<text v-else-if="item.area==2" class="hidden-text">{{$t('oio6')}} </text>
							<text v-else-if="item.area==3" class="hidden-text">{{$t('oio7')}} </text>
						</view>
						<view class="flexItem_b">
							{{item.address?maskAddress(item.address):$t('oio8')}}
						</view>
					</view>
					<view class="flexItem">
						<view class="flexItem_c">
							<text class="hidden-text th">{{$t('oio9')}}</text>：{{item.teamCount?item.teamCount:0}}
						</view>
						<view class="flexItem_c tsbom">
							<text
								class="hidden-text th">{{$t('oio10')}}</text>：{{Number(item.teamTotal)>0?Number(retainFourDecimals(item.teamTotal)):'0' }}
						</view>
					</view>
				</view>
			</view>
			<view class="comBom_bom d_f_between">
				<view class="comitem invpro" @click="fndynamicLeft('toinvite')">
					<view class="intop">
						<text class="hidden-text">{{$t('oio11')}}</text>
						<text class="tolian"></text>
					</view>
					<view class="">
						Invited friends
					</view>
				</view>
				<view class="comitem invhb" @click="tonews">
					<view class="intop">
						<text class="hidden-text">{{$t('oio12')}} </text>
						<text class="tolian"></text>
					</view>
					<view class="">
						Poster
					</view>
				</view>
			</view>
			<view class="asset_box_e_btn" style="margin-top:20upx;">
				<view class="button" @click="openyouxiang"><uni-icons type="paperplane" size="24" color="#fff"
						style="margin-right:10upx;"></uni-icons>{{$t('ll11')}}</view>
			</view>
		</view>

		<uni-popup ref="message" type="dialog">
			<uni-popup-dialog type="info" :cancelText="$t('oio13')" :confirmText="$t('oio14')" :content="messageText"
				:duration="2000" @confirm="confirm" @close="close"></uni-popup-dialog>
		</uni-popup>


		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" :cancelText="$t('ll9')" :confirmText="$t('ll10')" :title="$t('ll11')" :content="kefuinfo"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		string
	} from '../../uni_modules/uview-plus/libs/function/test'
	import {
		memberTeamInfo,
		login,
		pconfig
	} from '@/api/home.js'
	export default {
		data() {
			return {
				teamInfo: '', //社区信息
				messageText: '', //未绑定提示
				pconfigicon: '', //配置信息
				kefuinfo: ""
			}
		},
		mounted() {},
		onShow() {
			this.fnpconfig() //配置信息
			this.fnmemberTeamInfo()
			this.setTitle() //动态修改头部和tabBar
		},
		methods: {
			openyouxiang() {
				this.kefuinfo = `${this.$t('ll12')}：${this.pconfigicon.kefuMail}`
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				let that=this
				uni.setClipboardData({
					data: this.pconfigicon.kefuMail,
					success: function() {
						uni.showToast({
							title: that.$t("ll13"),
							icon: 'success'
						});
					}
				});
			},
			dialogClose() {

			},
			// 配置信息
			fnpconfig() {
				pconfig().then(res => {
					if (res.code == 200) {
						this.pconfigicon = res.data
					}
				})
			},



			setTitle() {
				uni.setTabBarItem({
					// 修改底部导航
					index: 0,
					text: this.$t('rp1'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 1,
					text: this.$t('rp2'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 2,
					text: this.$t('rp3'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 3,
					text: this.$t('rp4'),
				});
			},
			// 团队
			toteams(ads) {
				let adser = ads ? ads : '1'
				uni.navigateTo({
					url: '/pages/ommunity/team/team?ads=' + adser
				})
			},
			toteamsall() {
				uni.navigateTo({
					url: '/pages/ommunity/team/team'
				})
			},
			fndynamicLeft(nname) {
				this.fnLogin().then(res => {
					console.log(res)
					if (res.code == 200) {
						if (nname == 'setplace') {
							// 申请股东
							if (this.teamInfo.nodeLevel <= 0) {
								uni.navigateTo({
									url: '/pages/ommunity/shareholder/shareholder'
								})
							}
						} else if (nname == 'toinvite') {
							// 邀请
							uni.navigateTo({
								url: '/pages/ommunity/invite/invite'
							})

						}
					} else if (res.code == 500) {
						console.log(res.msg)
						this.messageText = res.msg
						this.$refs.message.open()
					}
				})
			},
			// 关闭弹框
			close() {
				this.$refs.message.close()
			},
			// 确认
			confirm() {
				this.$refs.message.close()
				uni.navigateTo({
					url: '/pages/password/password'
				})
			},
			// 获取绑定状态
			fnLogin() {
				let param = {
					address: this.$store.state.devAddress
				}
				return login(param)
			},
			torecord() {
				uni.navigateTo({
					url: '/pages/record/record?type=' + 3 + '&names=社区收益'
				})
			},
			// 社区信息
			fnmemberTeamInfo() {
				var params = {
					address: this.$store.state.devAddress
				}
				memberTeamInfo(params).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.teamInfo = res.data
					} else {
						this.teamInfo = {
							areaDtoList: [{
									area: 1
								},
								{
									area: 2
								},
								{
									area: 3
								}
							]
						}
					}
				})
			},
			// 监听并处理返回页面时发出的事件
			triggerRefresh() {
				this.refreshData();
			},
			refreshData() {
				// 这里实现你的数据刷新逻辑
				// 例如重新请求数据接口等
				this.fnmemberTeamInfo()
			},
			maskAddress(address) {
				// if (address.length <= 8) {
				// 	return address.replace(/./g, '*');
				// }
				if (!address) return;
				return address.substr(0, 4) + "****" + address.substr(-4);
			},
			tonews() {
				uni.navigateTo({
					url: '/pages/ommunity/pic/pic'
				})
				return;
				uni.showToast({
					icon: 'error',
					title: this.$t('oio15'),

				})
			},

			retainFourDecimals(num) {
				return Math.floor(num * 10000) / 10000;
			}
		}
	}
</script>

<style scoped lang="scss">
	.com {
		.comBom {
			padding: 30rpx;
			box-sizing: border-box;

			&_top {
				background: url("@/static/img/sqcbocx.png") no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 60rpx 30rpx;
				box-sizing: border-box;
				// height: 286rpx;
				width: 100%;
				position: relative;

				&::before {
					/* 1 */
					// height: 286rpx;
					width: 100%;
					display: block;
					content: '';
					z-index: -1;
					border-radius: 32rpx;
					border: 2rpx solid transparent;
					background: linear-gradient(360deg, #aec9e9, transparent 100%) border-box;
					/* 2 */
					-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
					/* 3 */
					-webkit-mask-composite: xor;
					/* 4 */
					mask-composite: exclude;
					position: absolute;
					top: 0;
					left: 0;
				}

				&_t {
					display: flex;
					align-items: center;
					color: #ffffff;
					font-size: 40rpx;
					font-weight: 500;
					font-family: "阿里巴巴普惠体";

					image {
						width: 26rpx;
						height: 27rpx;
						margin-right: 24rpx;
					}
				}

				&_r {
					position: absolute;
					right: 0;
					top: 40rpx;
					width: 162rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					border-radius: 28rpx 0 0 28rpx;
					opacity: 1;
					border: 2rpx solid #4a00a5;
					background: #4a00a5;
					color: #ffffff;
					font-size: 30rpx;
					font-weight: 400;
					font-family: "苹方";
				}

				&_b {
					margin-top: 30rpx;

					&_l {
						color: #ffffff;
						font-size: 38rpx;
						font-weight: 700;
						font-family: "阿里巴巴普惠体";
					}

					&_c {
						width: 2rpx;
						height: 128rpx;
						border-radius: 10000px;
						opacity: 1;
						background: linear-gradient(180deg, #c4c4c400 0%, #c4c4c482 56.99999999999999%, #c4c4c400 100%);
						margin: 0 10rpx;
					}

					&_r {
						text-align: center;

						.sy {
							color: #ffffff;
							font-size: 40rpx;
							font-weight: 700;
							text-align: center;
							margin: 0 auto;
						}

						.num {
							color: #ffffff;
							font-size: 32rpx;
							margin-top: 18rpx;
						}
					}
				}
			}

			&_com {
				width: 100%;

				.comboxs {

					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}

				.flexItem {
					width: 48%;
					// height: 160rpx;
					/* 两列每列宽50% */
					box-sizing: border-box;
					padding: 30rpx;
					margin-top: 50rpx;
					position: relative;
					z-index: 99;
					overflow: hidden;

					&::before {
						/* 1 */
						// height: 160rpx;
						width: 100%;
						display: block;
						content: '';
						z-index: 99;
						border-radius: 32rpx;
						// border: 2rpx solid transparent;
						// background: linear-gradient(160deg, #aec9e9, transparent 100%) border-box;
						// /* 2 */
						// -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
						// /* 3 */
						// -webkit-mask-composite: xor;
						/* 4 */
						mask-composite: exclude;
						position: absolute;
						top: 0;
						left: 0;
						overflow: hidden;
					}

					&_t {
						display: flex;
						align-items: center;
						color: #ffffff;
						font-size: 30rpx;
						font-weight: 900;
						font-family: "阿里巴巴普惠体";
						margin-bottom: 28rpx;

						&_img {
							width: 26rpx;
							height: 26rpx;
							margin-right: 12rpx;
						}
					}

					&_b {
						color: #ffffff;
						font-size: 24rpx;
						font-weight: 500;
						font-family: "DM Sans";
						padding-left: 30rpx;
						box-sizing: border-box;
					}

					&_c {
						color: #ffffff;
						font-size: 26rpx;
						font-weight: 400;
						font-family: "阿里巴巴普惠体";
						display: flex;
						align-items: center;

						text.th {
							display: inline-block;
							width: 70%;

						}

					}

					.tsbom {
						margin-top: 26rpx;
					}
				}

				.comboxs:nth-child(2n) .flexItem {
					padding: 30rpx 50rpx;
					box-sizing: border-box;
				}

				.flexItem:nth-child(1) {}

				.comboxs:nth-child(1) {
					.flexItem:nth-child(1) {
						background: url('@/static/img/sqe.png') no-repeat;
						background-size: cover;
					}

					.flexItem:nth-child(2) {
						background: url('@/static/img/sqa.png') no-repeat;
						background-size: cover;
					}
				}

				.comboxs:nth-child(2) {
					.flexItem:nth-child(1) {
						background: url('@/static/img/sqd.png') no-repeat;
						background-size: cover;
					}

					.flexItem:nth-child(2) {
						background: url('@/static/img/sqb.png') no-repeat;
						background-size: cover;
					}
				}

				.comboxs:nth-child(3) {
					.flexItem:nth-child(1) {
						background: url('@/static/img/sqs.png') no-repeat;
						background-size: cover;
					}

					.flexItem:nth-child(2) {
						background: url('@/static/img/sqc.png') no-repeat;
						background-size: cover;
					}
				}
			}

			&_bom {
				margin-top: 60rpx;
				align-items: normal !important;

				.comitem {
					width: 48%;
					// height: 247rpx;
					background-size: cover;
					background-repeat: no-repeat;
					padding: 80rpx 30rpx;
					box-sizing: border-box;
					color: #cdcdcd;
					font-size: 24rpx;
					font-weight: 500;
					font-family: "DM Sans";

					.intop {
						color: #ffffff;
						font-size: 48rpx;
						font-weight: 700;
						margin-bottom: 10rpx;
						display: flex;
						align-items: center;

						.tolian {
							display: inline-block;
							position: relative;
							margin-left: 18rpx;
							width: 20rpx;
							height: 20rpx;

							&::after {
								width: 20rpx;
								height: 20rpx;
								border-top: 6rpx solid;
								border-right: 6rpx solid;
								border-color: #ffffff;
								content: '';
								position: absolute;
								right: 0px;
								top: -2px;
								transform: rotate(45deg);

							}
						}
					}
				}

				.invpro {
					background: url("@/static/img/sqabox.png") no-repeat;
					background-size: cover;
				}

				.invhb {
					background: url("@/static/img/sqbbox.png") no-repeat;
					background-size: cover;
				}
			}
		}

		.hidden-text {
			white-space: break-spaces;
		}
	}

	.button {
		width: 100%;
		height: 2.375rem;
		line-height: 2.375rem;
		border-radius: 0.75rem;
		color: #ffffff;
		font-size: 0.9375rem;
		font-weight: 500;
		background: linear-gradient(-16.5deg, #430edb 0%, #b40fee 100%);
		box-sizing: border-box;
		border-radius: 10upx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>